<template>
    <div>
        <div class="column_box" @click="productClick">
            <div class="column_img">
                <image  style=" width: 350px;height: 360px;" :src="product.thumbnail"></image>
            </div>
            <div class="column_product">

                <div>
                    <text class="column_product_title">{{product.name}}</text>
                    <text class="column_product_subtitle">{{product.subTitle}}</text>
                </div>
                <div>
                    <div class="column_product_price_box">
                        <text class="column_product_price_newTitle">¥{{product.price}}</text>
                    </div>
                    <!-- <activity v-if="product.coupons.length !=0 || product.promotions.length !=0" tranString="310" :coupon="product.coupons" :promotions="product.promotions"></activity> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    const storage = weex.requireModule('storage')
    export default {
        data(){
            return{

            }
        },
        props:[
            'tageId','product'
        ],
        methods:{
            productClick() {
                eeui.closePage()
                storage.setItem('productAdd', JSON.stringify(this.product), event => {

                })
            }
        }
    }
</script>

<style scoped>
.column_box {
  width: 350px;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 10px;
}

.column_img {
  width: 350px;
  height: 360px;
  overflow: hidden;
}

.column_product {
  padding: 20px;
  box-sizing: border-box;
  background-color: white;
  height: 236px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.column_product_header {
  display: flex;
  flex-direction: row;
}

.column_product_header_img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
  margin-bottom: 10px;
}

.column_product_header_title {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.5);
}

.column_product_title {
  width: 310px;
  display: block;
  font-size: 28px;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
	lines:2;
}

.column_product_price_box {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.column_product_price_newTitle {
  font-size: 28px;
  font-weight: bold;
  color: rgba(231, 91, 83, 1);
  margin-right: 10px;
}

.column_product_price_oldTitle {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.5);
  text-decoration: line-through;
}

.column_coupon {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
}

.column_coupon_one {
  width: 100px;
  height: 32px;
  border-radius: 6px;
  /* background: linear-gradient(0deg, rgba(236, 95, 88, 1), rgba(255, 230, 230, 1)); */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(236, 95, 88, 1);
}

.column_coupon_one_title {
  font-size: 20px;
  color: rgba(236, 95, 88, 1);
  line-height: 32px;
  height: 32px;
  display: block;
}

.column_product_subtitle {
  font-size: 24px;
  color: rgba(0, 0, 0, 0.5);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

</style>
